<template>
	<div class="waitpayments">
	<back></back>
	<noorder v-show="isShow"></noorder>
	<div class="product" v-for="(item,index) in productlist">
		<div class="productlist">
			<p class="title">{{title}}</p>
			<div class="productInfomation" @click="goInformation(item)">
				<div class="left">
					<img :src="item.thumbnail" />
				</div>
				<div class="right">
					<p class="productname">{{item.productName}}</p>
					<p><span>租赁押金</span>：<span class="deposit">￥{{item.deposit}}元</span></p>
					<p v-if="!!item.favourableAmount"><span>预付租金</span>：<span class="deposit">￥{{item.favourableAmount}}元</span></p>
					<!--<p><span>零售价</span>：<span class="price">￥{{item.price}}</span></p>-->
				    <p class="shortDesc">{{item.shortDesc}}</p>
				</div>
			</div>
			<div class="productcount">
				<p v-if="!!item.totalPay"><span>合计：</span><span>￥</span><span>{{item.totalPay}}元</span></p>
				<p v-else><span>合计：</span><span>￥</span><span>{{item.deposit}}元</span></p>
			</div>
			<div class="payWay">
				<label class="demo--label">
                <input class="demo--radio" type="radio" name="radio" value="1" @click="pay(1)">
                <span class="demo--radioInput"></span>微信支付
              </label>
              <label class="demo--label">
                <input class="demo--radio" type="radio" name="radio" value="2" @click="pay(2)">
                <span class="demo--radioInput"></span>账户余额
              </label>
           </div>
			<div class="payfor" @click="payorder(item.rentSerial)">付款</div>
			<div class="cancleorder" @click="cancleorder(item.rentSerial)">取消订单</div>
		</div>
	</div>
</div>
</template>

<script>
import noorder from '@/components/m-noorder/noorder'
import back from '@/components/m-back/back'
import { jsSDK } from '@/common/js/pay'

export default {
	name: 'waitpayments',
	components: {
		noorder,
		back
	},
	data() {
		return {
			productlist: [],
			title: '',
			isShow: false,
			payWay: '付款',
			myVal: ''
		}
	},
	created () {
		//this.login();	
		this.getNotPay();
	},
	mounted() {
		
	},
	methods: {
		//登录
		login() {
			this.$http.get(this.$store.state.reqUrl + '/test/login', {
				params:{					
				   isMember:'0'
				}
			}).then(res => {
				console.log(res)
			})
			/*this.$http.get(this.$store.state.reqUrl + '/test/login?openId=oid4101XcDhlcB7D5amPlAvOs4ik',{
				}).then(res => {
					console.log(res)
			    })*/
		},
		//支付方式
		pay(value) {
			this.myVal = value;
		},
		//获取未支付订单列表
		getNotPay() {			
			this.title = this.$route.query.order_title;
			this.$http.get(this.$store.state.reqUrl + this.$route.query.interface_url, {
				params: {
					/*pageNum: 1,
					pageSize: 10*/
					statu:this.$route.query.statu
				}
			}).then(res => {
					if(res.data.list.length === 0) {
						this.isShow = true;
					} else {
						this.productlist = res.data.list;
					}
			})
		},
		//到详情页
		goInformation(item) {
			this.$router.push({
				path: '/waitpaymentinformation',
				query: {
					payNo_rentSerial: item.rentSerial,
					interface_url: this.$route.query.interface_url,
					style_name: this.$route.query.style_name,
					order_title: this.$route.query.order_title,
					style_title: this.$route.query.style_title
				}
			})
		},
		//付款或者查看取货码
		payorder(rentSerial) {
			this.stylename = this.$route.query.style_name;
				this.$http.get(this.$store.state.reqUrl + '/customer/orders/payDeposit/' + rentSerial + '?payWay=' + this.myVal, {}).then(res => {
					if(res.data.payWay == 1) {
						jsSDK(res.data, this.payWay)
					} else {
						this.$toast(res.data.msg)
						this.$router.push({
							path: "/waitpickgood",
							query: {
								interface_url: '/customer/orders/waitForPick',
								style_name: '取货码',
								order_title: '待取货',
								style_title:'实付款'
							}
						})
					}
				}).catch(res => {
					this.$toast(res.response.data)
				})
		},
		//取消订单
		cancleorder(rentSerial) {
			this.$messagebox.confirm('您确定要取消此订单吗?').then(action => {
				this.$http.get(this.$store.state.reqUrl + '/customer/orders/cancleOrder/' + rentSerial, {}).then(res => {
					this.productlist = [];
					this.getNotPay()
					this.$toast({
						message: res.data.msg,
						duration: 2500
					})
				}).catch(res => {
					this.$toast(res.response.data)
				})
			})
		}
	}
}
</script>

<style lang="less" scoped>
    .waitpayments {
    	margin-top: 100px;
    	width: 100%;
    	.product {
    		margin: 0 20px 20px 20px;
    		background: #FFFFFF;  
    		overflow: hidden; 		
    		border-radius: 28px;
    		font-size: 28px;
    		.productlist {
    			padding:20px 20px;
    			.title {
    				color: #FF0000;
    				text-align: right;
    			}
    			.productInfomation {
    				display: flex;
    				.left {
    					width: 120px;
    					height: 120px;
    					img {
    						width: 100%;
    						height: 100%;
    					}
    				}
    				.right {
    					flex: 1;
    					margin-left: 20px;
    					.productname{
    						font-size: 30px;
    						color: #000000;
    						font-weight: 800;
    						margin-bottom: 12px;
    					}
    					.deposit{
    						color: #FF0000;
    						font-size: 28px;
    					}
    					.price{
    						color: #FF0000;
    						font-size: 28px;
    					}
    					.shortDesc{
    						margin-top:8px;
    						line-height: 30px;
    						font-size: 26px;
    					}
    				}
    			}
    			.productcount {
    				text-align: right;
    				margin: 20px 0;    				
    			}
    			.payWay {
    			.demo--label {
    				margin: 20px 20px 0 0;
    				display: inline-block
    			}
    			.demo--radio {
    				display: none
    			}
    			.demo--radioInput {
    				background-color: #fff;
    				border: 2px solid rgba(0, 0, 0, 0.15);
    				border-radius: 100%;
    				display: inline-block;
    				height: 36px;
    				margin-right: 10px;
    				margin-top: -1px;
    				vertical-align: middle;
    				width: 36px;
    				line-height: 1
    			}
    			.demo--radio:checked+.demo--radioInput:after {
    				background-color: #00A1E9;
    				border-radius: 100%;
    				content: "";
    				display: inline-block;
    				height: 26px;
    				margin-left: 5px;
    				margin-top: 5px;
    				width: 26px
    			}
    			.demo--checkbox.demo--radioInput,
    			.demo--radio:checked+.demo--checkbox.demo--radioInput:after {
    				border-radius: 0;
    			}
    		}
    			.cancleorder {
    				float: right;
    				width: 150px;
    				height: 60px;
    				text-align: center;
    				line-height: 60px;
    				border: 1px solid gainsboro;
    				border-radius: 30px;
    				margin-bottom: 30px;
    			}
    			.payfor {
    				float: right;
    				width: 150px;
    				height: 60px;
    				text-align: center;
    				line-height: 60px;
    				border: 1px solid #FF0000;
    				color: #FF0000;
    				border-radius: 30px;
    				margin-left: 20px;
    				margin-bottom: 30px;
    			}
    		}
    	}
    }
</style>